<template>
  <el-container class="home-container">
    <!-- 头部区域 -->
    <el-header style="background-color: #40a0ff0c; height: 70px">
      <!-- Logo -->
      <div class="demo-image__preview" style="float: left">
        <el-image style="width: 60px; height: 60px" :src="url"> </el-image>
      </div>
      <!-- 未登录 - 头像及登录按钮 -->
      <span class="el-dropdown-link" v-show="!isLogin">
        <span style="float: right; margin-left: 0.8rem">
          <el-link
            type="primary"
            :underline="false"
            @click="loginDialogVisible = true"
            >请登录</el-link
          >
        </span>
      </span>

      <!-- 登录后 - 头像及登录按钮 -->
      <span v-show="isLogin">
        <el-avatar :src="TimageUrl"></el-avatar>
        <el-dropdown>
          <span style="float: right; margin-left: 0.8rem">
            <el-link type="primary" :underline="false">
              {{ username }}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </el-link>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="toPersonalInfo"
              >个人信息</el-dropdown-item
            >
            <el-dropdown-item @click.native="toQuit" divided
              >退出</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </span>
    </el-header>

    <!-- 个人信息对话框 -->
    <el-dialog
      title="个人信息"
      :visible.sync="InfoVisible"
      width="50%"
      @close="editDialogclosed"
    >
      <div>
        <!-- 内容主体区域 -->
        <el-row :gutter="24">
          <el-col :span="12">
            <el-card style="margin-left: 5rem; width: 100%">
              <el-form :model="editForm" ref="editFormRef" label-width="70px">
                <el-row :gutter="20">
                  <el-col :span="8">
                    <div>
                      <el-upload
                        class="avatar-uploader"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload"
                      >
                        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                      </el-upload>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <!-- 用户名 -->
                    <el-form-item label="账号" prop="username">
                      <el-input v-model="editForm.username" disabled></el-input>
                    </el-form-item>
                    <!-- 昵称 -->
                    <el-form-item label="昵称" prop="name">
                      <el-input v-model="editForm.name"></el-input>
                    </el-form-item>
                    <!-- 密码 -->
                    <el-form-item label="密码" prop="password">
                      <el-input
                        type="password"
                        v-model="editForm.password"
                      ></el-input>
                    </el-form-item>
                    <!-- 年龄 -->
                    <el-form-item label="年龄" prop="age">
                      <el-input v-model="editForm.age"></el-input>
                    </el-form-item>
                    <!-- 性别 -->
                    <el-form-item label="性别" prop="sex">
                      <el-input v-model="editForm.sex"></el-input>
                    </el-form-item>
                    <!-- 手机 -->
                    <el-form-item label="手机" prop="phone">
                      <el-input v-model="editForm.phone"></el-input>
                    </el-form-item>
                    <!-- 邮箱 -->
                    <el-form-item label="邮箱" prop="email">
                      <el-input v-model="editForm.email"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <!-- 底部按钮区域 -->
        <el-button @click="InfoVisible = false">取 消</el-button>
        <el-button type="primary" @click="PutPassWord()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 登录对话框 -->

    <el-dialog
      title="商家登录"
      :visible.sync="loginDialogVisible"
      :model="loginForm"
      width="30%"
      center
    >
      <el-form>
        <el-form-item label="账号">
          <el-input
            type="username"
            v-model="loginForm.username"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            type="password"
            v-model="loginForm.password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="loginVerify"> 登录</el-button>
        <el-button @click="dialogChange(1)">注册</el-button>
      </span>
    </el-dialog>
    <!-- 登录End -->

    <!-- 注册登录框 -->
    <el-dialog
      title="注册商家号"
      :visible.sync="registerDialogVisible"
      width="30%"
      center
    >
      <el-form>
        <el-form-item label="账号" prop="username">
          <el-input
            type="username"
            v-model="registerForm.username"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            type="password"
            v-model="registerForm.password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="registerVerify"> 提交</el-button>
        <el-button @click="dialogChange(2)">返回</el-button>
      </span>
    </el-dialog>
    <!-- 注册End -->

    <!-- 页面主体区域 -->
    <el-container style="">
      <!-- 侧边栏 -->

      <el-aside width="150px" style="height: 1000px">
        <!-- 侧边栏菜单区域 -->
        <el-menu
          default-active="/shop/baseinfo"
          style="background-color: #f6fbff; border-right: solid 1px #eeeeee"
          router
        >
          <el-menu-item index="/shop/shopList">
            <i class="el-icon-menu"></i>
            <span slot="title">店铺</span>
          </el-menu-item>
          <el-menu-item index="/commodity">
            <i class="el-icon-document"></i>
            <span slot="title">商品</span>
          </el-menu-item>
          <el-menu-item index="/deal">
            <i class="el-icon-setting"></i>
            <span slot="title">交易</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <!-- 右侧内容主体 -->
      <el-main style="height: 100%">
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data () {
    return {
      // 商家个人信息数据
      imageUrl: "",
      // 获取到的用户信息
      editForm: {
      },
      // END

      // 控制修改密码对话框的隐藏和显示，默认为false
      InfoVisible: false,
      // 判断登陆前后的样式
      isLogin: false,
      // 头像的Url
      TimageUrl: "https://ps.ssl.qhimg.com/t015f590bb00aa069f4.jpg",
      // LOGO地址
      url: "https://ps.ssl.qhimg.com/t015f590bb00aa069f4.jpg",
      // 个人信息dialog框
      quitDialogVisible: false,
      // 用户名和密码
      username: "",
      password: "",
      // 登陆的表单数据
      loginForm: {
        username: '',
        password: ''
      },
      // 注册的表单数据
      registerForm: {
        username: "",
        password1: "",
        password2: "",
      },
      // 商家个人信息的表单数据
      usinessInfo: {},
      loginDialogVisible: false,
      registerDialogVisible: false,
    };
  },
  created () { },
  methods: {
    // 点击下拉菜单触发的事件
    // 注销
    handleCommand (command) {
      if (command === "logout") {
        window.sessionStorage.clear();
        this.$router.push("/login");
      }
    },
    // 注册登陆两个dia框的切换事件
    dialogChange (index) {
      // 1.
      if (index == 1) {
        this.loginDialogVisible = false;
        this.registerDialogVisible = true;
      } else {
        this.loginDialogVisible = true;
        this.registerDialogVisible = false;
      }
    },
    // 登陆验证
    async loginVerify () {
      const { data: res } = await this.$http.post('users/Login', this.loginForm);
      if (res.data) {
        if (res.data.rolesId === 2) {
          window.sessionStorage.setItem('nickName', res.data.nickName)
          window.sessionStorage.setItem('id', res.data.id)
          this.$message.success('登录成功')
          this.loginDialogVisible = false
          this.username = res.data.nickName
          this.isLogin = !this.isLogin
          this.$router.push('/shop/shopList')
        } else {
          this.$message.error('对不起您不是商家')
        }
      } else {
        this.$message.error('账号密码错误，或该用户已被封禁')
      }
    },
    // 登陆事件
    registerVerify () {
      alert('假装已经注册')
    },
    // 个人信息弹窗事件
    toPersonalInfo () {
      this.InfoVisible = true;
    },
    // 商家退出事件
    toQuit () {
      this.isLogin = false;
      window.sessionStorage.clear();
      alert("退出了");
    },
    // 监听修改密码对话框关闭事件
    editDialogclosed () {
      this.$refs.editFormRef.resetFields();
    },
    // 头像上传
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    isLoginSta(){
      if(window.sessionStorage.getItem('id')){
        this.username = window.sessionStorage.getItem('nickName')
        this.isLogin = true;
      }else{
        this.username = '请登录'
      }
    }
  },mounted(){
    this.isLoginSta();
  }
};
</script>

<style scoped>
.el-container {
  height: 100%;
  overflow-y: hidden;
}
html {
  height: 100%;
  margin: 0;
  padding: 0;
}
.el-header {
  background-color: #373d41;
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  align-items: center;
  font-size: 20px;
}
.el-aside {
  background-color: #40a0ff0c;
}
.el-menu {
  border-right: none;
}
.el-main {
  height: 100%;
}
.el-link:hover {
  user-select: none;
  border: none;
}
</style>
